<template>
  <dl>
    <dt class="fs40 pb20 fw-b">默认</dt>
    <dd class="pb20 d-f fd-c gap20">
      普通
      <t-step v-model="step1"  />
      readonly
      <t-step v-model="step1" readonly />
      disabled
      <t-step v-model="step1" disabled />
      is-minus
      <t-step v-model="step1" :is-minus="false" />
      is-add
      <t-step v-model="step1" :is-add="false" />
    </dd>
    <dd class="pb20 d-f gap20">
      {{ step1 }}
    </dd>
    <dd class="mt20">
      <pre v-highlight="stepText1"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">最大 | 最小 值</dt>
    <dd class="pb20 d-f gap20">
      <t-step min="0" max="10" v-model="step2" />
    </dd>
    <dd class="pb20 d-f gap20">
      {{ step2 }}
    </dd>
    <dd class="mt20">
      <pre v-highlight="stepText2"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">步距</dt>
    <dd class="pb20 d-f gap20">
      <t-step v-model="step3" step="0.3" />
    </dd>
    <dd class="pb20 d-f gap20">
      {{ step3 }}
    </dd>
    <dd>
      强制步距: 比如 1不是0.3步距的整数倍 开启 forcedStep后 将最大值自动改为最接近最大的整数倍最大值
    </dd>
    <dd class="pb20 d-f gap20">
      <t-step v-model="step4" step="0.3" forced-step max="1" min="-1"/>
    </dd>
    <dd class="pb20 d-f gap20">
      {{ step4 }}
    </dd>
    <dd class="mt20">
      <pre v-highlight="stepText3"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const step1 = ref<number>(0)
const step2 = ref<number>(3)
const step3 = ref<number>(0)
const step4 = ref<number>(0)


const stepText1 = `普通
<t-step v-model="step1"  />
readonly
<t-step v-model="step1" readonly />
disabled
<t-step v-model="step1" disabled />
is-minus
<t-step v-model="step1" :is-minus="false" />
is-add
<t-step v-model="step1" :is-add="false" />`
const stepText2 = `<t-step min="3" max="10" v-model="step2" />`
const stepText3 = `<dd class="pb20 d-f gap20">
  <t-step v-model="step3" step="0.3" />
</dd>
<dd class="pb20 d-f gap20">
  {{ step3 }}
</dd>
<dd>
  强制步距: 比如 1不是0.3步距的整数倍 开启 forcedStep后 将最大值自动改为最接近最大的整数倍最大值
</dd>
<dd class="pb20 d-f gap20">
  <t-step v-model="step4" step="0.3" forced-step max="1" min="-1"/>
</dd>
<dd class="pb20 d-f gap20">
  {{ step4 }}
</dd>`
</script>

<style scoped lang="scss">

</style>
